<template>
  <div>
    <p>
      <button @click="add()" class="btn btn-white btn-default btn-round">
        <i class="ace-icon fa fa-edit"></i>
        新增
      </button>
      &nbsp;&nbsp;&nbsp;&nbsp;
      <button @click="list(1)" class="btn btn-white btn-default btn-round">
        <i class="ace-icon fa fa-refresh red2"></i>
        刷新
      </button>
    </p>
    <div class="row">
      <div v-for="course in courses" class="col-md-4">
        <div class="thumbnail search-thumbnail">
          <img v-show="!course.image" class="media-object" src="/static/images/demo-course.jpg" />
          <img v-show="course.image" class="media-object" v-bind:src="course.image" />
          <div class="caption">
            <div class="clearfix">
              <span class="pull-right label label-primary info-label">
                {{COURSE_LEVEL | optionKV(course.level)}}
              </span>
              <span class="pull-right label label-primary info-label">
                {{COURSE_CHARGE | optionKV(course.charge)}}
              </span>
              <span class="pull-right label label-primary info-label">
                {{COURSE_STATUS | optionKV(course.status)}}
              </span>
            </div>

            <h3 class="search-title">
              <a href="#" class="blue">{{course.name}}</a>
            </h3>
            <p>
              <span class="blue bolder bigger-150">{{course.price}}&nbsp;<i class="fa fa-rmb"></i></span>&nbsp;
            </p>
            <p>{{course.summary}}</p>
            <p>
              <span class="badge badge-info">{{course.id}}</span>
              <span class="badge badge-info">排序：{{course.sort}}</span>
              <span class="badge badge-info">时长：{{course.time}}</span>
            </p>
            <p>
              <button v-on:click="toChapter(course)" class="btn btn-white btn-xs btn-info btn-round">
                大章
              </button>&nbsp;
              <button v-on:click="update(course)" class="btn btn-white btn-xs btn-info btn-round">
                编辑
              </button>&nbsp;
              <button v-on:click="del(course.id)" class="btn btn-white btn-xs btn-warning btn-round">
                删除
              </button>
            </p>
          </div>
        </div>
      </div>
    </div>

    <pagination ref="pagination" v-bind:list="list" v-bind:itemCount="8"></pagination>

    <div id="form-modal" class="modal fade" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">新增表单</h4>
          </div>
          <div class="modal-body">
            <form class="form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">名称</label>
                            <div class="col-sm-10">
                                <input v-model="course.name" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">概述</label>
                            <div class="col-sm-10">
                              <textarea v-model="course.summary" class="form-control"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">时长</label>
                            <div class="col-sm-10">
                                <input v-model="course.time" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">价格（元）</label>
                            <div class="col-sm-10">
                                <input v-model="course.price" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">封面</label>
                            <div class="col-sm-10">
                                <input v-model="course.image" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">级别</label>
                            <div class="col-sm-10">
                              <select v-model="course.level" class="form-control">
                                <option v-for="o in COURSE_LEVEL" v-bind:value="o.key">{{o.value}}</option>
                              </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">收费</label>
                            <div class="col-sm-10">
                              <select v-model="course.charge" class="form-control">
                                <option v-for="o in COURSE_CHARGE" v-bind:value="o.key">{{o.value}}</option>
                              </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">状态</label>
                            <div class="col-sm-10">
                              <select v-model="course.status" class="form-control">
                                <option v-for="o in COURSE_STATUS" v-bind:value="o.key">{{o.value}}</option>
                              </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">报名数</label>
                            <div class="col-sm-10">
                                <input v-model="course.enroll" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">顺序</label>
                            <div class="col-sm-10">
                                <input v-model="course.sort" class="form-control">
                            </div>
                        </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            <button @click="insert" type="button" class="btn btn-primary">保存</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    import Pagination from "../../components/pagination";
    export default {
        components: {Pagination},
        name: "business-course",
        data: function () {
          return{
              course:{},
              courses:[],
              COURSE_LEVEL:COURSE_LEVEL,
              COURSE_CHARGE:COURSE_CHARGE,
              COURSE_STATUS:COURSE_STATUS,
          }
        },
        mounted() {
            let _this = this;
            _this.$refs.pagination.size = 5;
            _this.list(1);
        },
        methods: {
            /**
             * 点击新增
             */
            add() {
                let _this = this;
                _this.course = {};
                $("#form-modal").modal("show");
            },

            /**
             * 点击查询
             * @param page
             */
            list(page) {
                let _this = this;
                Loading.show();
                _this.$ajax.post(process.env.VUE_APP_SERVER + '/business/admin/course/list', {
                    page: page,
                    //.$refs获取子组件的变量 . 子组件
                    size: _this.$refs.pagination.size,
                }).then((response) => {
                    //我们应该是要的是data下面的数据
                    Loading.hide();
                    //为了简写
                    let resp = response.data;
                    _this.courses = resp.content.list;
                    //重新渲染render
                    _this.$refs.pagination.render(page, resp.content.total);
                })
            },

            /**
             * 点击增加
             */
            insert() {
                let _this = this;
                // 保存校验
                if (1 != 1
                    || !Validator.require(_this.course.name, "名称")
                    || !Validator.length(_this.course.name, "名称", 1, 50)
                    || !Validator.length(_this.course.summary, "概述", 1, 2000)
                    || !Validator.length(_this.course.image, "封面", 1, 100)
                ) {
                    return;
                }
                Loading.show();
                _this.$ajax.post(process.env.VUE_APP_SERVER + '/business/admin/course/add', _this.course).then((response) => {
                    let resp = response.data;
                    Loading.hide();
                    if (resp.success) {
                        $("#form-modal").modal("hide");
                        _this.list(1);
                        Toast.success("保存成功");
                    }else{
                        Toast.error(resp.message)
                    }
                })
            },

            /**
             * 点击修改
             * @param course
             */
            update(course) {
                let _this = this;
                _this.course = $.extend({}, course);
                $("#form-modal").modal("show");

            },

            /**
             * 点击删除
             * @param id
             */
            del: function (id) {
                let _this = this;
                Loading.show();
                Confirm.show("删除后不可恢复，确认删除？",function () {
                    Loading.hide();
                    _this.$ajax.delete(process.env.VUE_APP_SERVER+ '/business/admin/course/delete/' + id).then((response) => {
                        let resp = response.data;
                        if (resp.success) {
                            _this.list(1);
                            Toast.success("删除成功")
                        }
                    })
                })
            },

            /**
             *点击[大章]
             */
            toChapter(course) {
                let _this = this;
                SessionStorage.set("course",course);
                _this.$router.push("/business/chapter")
            },

        }
        }
</script>

<style scoped>
  .caption h3 {
    font-size: 20px;
  }
</style>
